<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏(内含注册模块) -->
      <TopBar></TopBar>

      <!-- 顶栏容器 -->
      <el-header>
        <HeadBar></HeadBar>
      </el-header>

      <!-- 登陆模块 -->
      <MyLogin></MyLogin>

      <el-main></el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";

import TopBar from "components/common/topbar/TopBar.vue";
import MyLogin from "components/common/myLogin/MyLogin.vue";
import HeadBar from "components/content/headBar/HeadBar.vue"

export default {
  name: "App",
  created() {
    // 获取浏览器localStorage，判断用户是否已经登录
    if (localStorage.getItem("user")) {
      // 如果已经登陆，设置vuex的登录状态
      let user = JSON.parse(localStorage.getItem("user"));
      this.setUser(user);
    }
  },
  computed: {
    ...mapGetters(["getUser"])
  },
  components: {
    TopBar,
    MyLogin,
    HeadBar
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions(["setUser"]),
    registerShow() {
      this.register = true;
    }
  }
};
</script>

<style>
/* 全局css */
@import "~assets/css/global.css";
.footer {
  width: 100%;
  height: 1px;
}
#app {
  width: 100%;
}
.TopBar {
  width: 100%;
}
</style>
